<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>资质审查</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/index1.css">

</head>

<body>
    <div id="app" v-cloak>
        <div class="cardBox">
            <div class="carTop">
                <div class="lInfo">
                    <img src="./img/timg.png" alt="">
                    <div>
                        {{userName||''}}
                        <span>{{userTel||''}}</span>
                    </div>
                </div>
                <van-icon name="edit" @click="editHandle"></van-icon>
            </div>
        </div>
        <div class="listBox">
            <div class="title">我的记录
                <van-button type="primary" @click="addHandle" size="small">创建记录</van-button>
            </div>
            <template v-if="list.length!=0">
                <div class="listItem" v-for="(item,index) in list" :key="index" @click="toInfo(item)">
                    <div>
                        <div>
                            <span>{{item.recordName}}</span>
                            <span>{{item.remark}}</span>
                        </div>
                        <span>{{item.uploadTime}}</span>
                    </div>
                    <span>查看</span>
                </div>
                <div class="codeBox">
                    <span>关注公众号，实时掌握最新进度</span>
                    <img src="./img/erWeima.jpg" alt="">
                </div>
            </template>
            <div v-else class="emptyBox">
                <img src="./img/zanwu.png" alt="">
                暂无记录
            </div>

        </div>



        <!-- 创建弹窗 -->
        <van-dialog v-model="showDia" title="创建记录" show-cancel-button :before-close="beforeClose">
            <van-field v-model="recordName" label="记录标题" placeholder="请输入记录标题" input-align="right"></van-field>
            <van-field v-model="note" label="记录简介" placeholder="请输入记录简介" input-align="right"></van-field>
        </van-dialog>
        <!-- 完善用户信息 -->
        <van-dialog v-model="showUserDia" title="完善信息" :before-close="userBeforeClose">
            <van-field v-model="userName" label="姓名" placeholder="请输入您的姓名" input-align="right"></van-field>
            <van-field v-model="userTel" label="电话" placeholder="为方便后续沟通，请输入您的电话" input-align="right"></van-field>
        </van-dialog>


        <!-- <div class="save">
            <van-button type="primary" @click="addHandle" size="small">创建记录</van-button>
        </div> -->

        <div class="mask" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="./js/url.js" type="text/javascript" charset="utf-8"></script>
    <script>

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");

        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                list: [],
                showDia: false,
                note: '',
                recordName: '',
                userId: localStorage.recordUserId || 0,
                userName: '',// 用户名
                userTel: '',// 电话
                showUserDia: false,
                user: '',//用户数据
            },
            created() {
                if (localStorage.recordUser) {
                    this.user = JSON.parse(localStorage.recordUser)
                    this.userId = this.user.userId
                    this.userName = this.user.userName
                    this.userTel = this.user.telNum
                    this.getData()
                }
                this.getUserData()
                // this.userId = 1
                // localStorage.recordUserId = 1
                // this.getData()
            },
            methods: {
                getUserData: function () {
                    console.log(code);
                    var that = this;
                    that.mask = true
                    ajax({
                        url: newUrl + "qual/login",
                        type: 'post',
                        data: {
                            code: code,
                            flag: 0
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            // alert(res)
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                if (res.data == null) {
                                    that.$toast('获取信息失败，请退出重试')
                                    return
                                } else {
                                    that.user = res.data

                                    localStorage.recordUserId = that.user.userId
                                    if (that.user.userName == null) {
                                        that.showUserDia = true
                                    } else {
                                        localStorage.recordUser = JSON.stringify(that.user)
                                        that.userId = that.user.userId
                                        that.userName = that.user.userName
                                        that.userTel = that.user.telNum
                                        that.getData()
                                    }

                                }

                            }
                        },
                    })
                },

                editHandle() {
                    this.showUserDia = true
                },

                // 完善用户信息弹窗
                userBeforeClose(action, done) {
                    console.log(action);

                    if (action == 'cancel') {
                        done(true)
                    } else if (action == 'confirm') {
                        if (this.userName == '') {
                            this.$toast('请输入您的姓名')
                            done(false)
                            return
                        } else if (this.userTel == '') {
                            this.$toast('请输入您的电话')
                            done(false)
                            return
                        } else if (!this.validator(this.userTel)) {
                            this.$toast('请输入正确的电话号码')
                            done(false)
                            return
                        } else {
                            console.log(this.userName);
                            console.log(this.userTel);
                            var that = this;
                            that.mask = true
                            ajax({
                                url: newUrl + "qual/editQualUser",
                                type: 'post',
                                data: {
                                    userName: that.userName,
                                    telNum: that.userTel,
                                    userId: that.user.userId,
                                    openId: that.user.openId,
                                },
                                dataType: 'json',
                                timeout: 10000,
                                contentType: "application/json",
                                success: function (res) {
                                    var res = JSON.parse(res)
                                    console.log(res);
                                    that.mask = false
                                    if (res.flag) {
                                        localStorage.recordUser = JSON.stringify(that.user)
                                        localStorage.recordUserId = that.user.userId
                                        that.getData()
                                        done(true)
                                    } else {
                                        that.$toast('保存失败，请重试')
                                    }
                                },
                            })

                        }
                    }
                },

                validator(val) {
                    // 验证手机号 和座机号
                    return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
                },


                // 创建记录弹窗
                beforeClose(action, done) {

                    console.log(action);

                    if (action == 'cancel') {
                        done(true)
                    } else if (action == 'confirm') {
                        if (this.recordName == '') {
                            this.$toast('请输入记录标题')
                            done(false)
                            return
                        } else {
                            console.log(this.note);
                            var that = this;
                            that.mask = true
                            ajax({
                                url: newUrl + "qual/addAndEditQualRecord",
                                type: 'post',
                                data: {
                                    recordName: that.recordName,
                                    userId: that.userId,
                                    remark: that.note,
                                    uploadTime: that.getTime()
                                },
                                dataType: 'json',
                                timeout: 10000,
                                contentType: "application/json",
                                success: function (res) {
                                    var res = JSON.parse(res)
                                    console.log(res);
                                    that.mask = false
                                    if (res.flag) {
                                        that.getData()
                                        done(true)
                                    } else {
                                        that.$toast('保存失败，请重试')
                                    }
                                },
                            })

                        }
                    }

                },

                getTime() {
                    var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
                    return new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
                },
                // 创建记录
                addHandle() { this.showDia = true },
                toInfo(obj) {
                    window.location.href = './step.html'
                    localStorage.recordId = obj.recordId
                },
                getData() {
                    var that = this;
                    // this.mask = true
                    ajax({
                        url: newUrl + "qual/QualRecordList",
                        type: 'post',
                        data: {
                            userId: that.userId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.list = res.data.reverse()
                                console.log(res.data);
                                that.mask = false
                            }
                        },
                    })
                },


            }
        })



    </script>

</body>

</html>